<template>
    <div>
        <div id="printChart">
            <div style="display: flex;flex-direction: row;height: 500px;">
                <div id="main1" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
                <div id="main2" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
                <div id="main3" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
            </div>
            <div style="height: 30px"></div>
            <div style="display: flex;flex-direction: row;height: 500px;">
                <div id="main4" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
                <div id="main5" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
                <div id="main6" style="width: 33%;height: 100%;background-color: aliceblue;margin: 20px 10px"></div>
            </div>
            <div style="height: 30px"></div>
            <div>
                <h3>工人维修情况一览表</h3>
                <el-table
                        v-loading="loading"
                        :data="tableData"
                        border
                        style="width: 100%;font-size: 20px">
                    <el-table-column
                            fixed="left"
                            prop="id"
                            label="编号"
                            width="160">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="工作类型"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="联系方式"
                            width="155">
                    </el-table-column>
                    <el-table-column
                            prop="acceptnum"
                            label="接单数量"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="completenum"
                            label="完成数量"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="percentage"
                            label="完成率"
                            width="110">
                    </el-table-column>
                    <el-table-column
                            prop="score1"
                            label="维修速度"
                            :formatter="formatterScore1"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="score2"
                            label="维修质量"
                            :formatter="formatterScore2"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="score3"
                            label="维修员态度"
                            :formatter="formatterScore3"
                            width="150">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            drawChart(chartDataName, chartDataPercentage) {
                //基于准备好的dom，初始化echarts实例
                var myChart1 = this.$echarts.init(document.getElementById('main1'));
                var myChart2 = this.$echarts.init(document.getElementById('main2'));
                var myChart3 = this.$echarts.init(document.getElementById('main3'));
                var myChart4 = this.$echarts.init(document.getElementById('main4'));
                var myChart5 = this.$echarts.init(document.getElementById('main5'));
                var myChart6 = this.$echarts.init(document.getElementById('main6'));
                var that = this

                myChart1.setOption({
                    title: {
                        text: '工单接单数',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '申报数：' + params.data["value"]
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '工单接单数',
                            type: 'pie',
                            radius: [30, 130],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: this.chartData1
                        }
                    ]
                });

                myChart2.setOption({
                    title: {
                        text: '工单完成数',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '完成数：' + params.data["value"]
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '工单完成数',
                            type: 'pie',
                            radius: [30, 130],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8,
                            },
                            data: this.chartData2
                        }
                    ]
                });

                myChart3.setOption({
                    title: {
                        text: '工单完成率',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '完成率：' + params.data + "%"
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    grid: {
                        left: "15%"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: this.chartData3.yAxis_data
                    },
                    series: [
                        {
                            data: this.chartData3.series_data,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function (d) {
                                        return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                                    },
                                    label: {
                                        show: true,
                                        formatter: function (params) {
                                            if (params.data !== 0) {
                                                return params.data + "%"
                                            } else {
                                                return ""
                                            }
                                        },
                                    }
                                }
                            }
                        }
                    ]
                });

                myChart4.setOption({
                    title: {
                        text: '维修质量得分',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '维修质量得分：' + params.data
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    grid: {
                        left: "15%"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: this.chartData4.yAxis_data
                    },
                    series: [
                        {
                            data: this.chartData4.series_data,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function (d) {
                                        return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                                    },
                                    label: {
                                        show: true,
                                        formatter: function (params) {
                                            if (params.data !== 0) {
                                                return params.data
                                            } else {
                                                return ""
                                            }
                                        },
                                    }
                                }
                            }
                        }
                    ]
                });

                myChart5.setOption({
                    title: {
                        text: '维修速度得分',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '维修速度得分：' + params.data
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    grid: {
                        left: "15%"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: this.chartData5.yAxis_data
                    },
                    series: [
                        {
                            data: this.chartData5.series_data,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function (d) {
                                        return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                                    },
                                    label: {
                                        show: true,
                                        formatter: function (params) {
                                            if (params.data !== 0) {
                                                return params.data
                                            } else {
                                                return ""
                                            }
                                        },
                                    }
                                }
                            }
                        }
                    ]
                });

                myChart6.setOption({
                    title: {
                        text: '维修态度得分',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            console.log(params)
                            return params.name + '维修态度得分：' + params.data
                        }
                    },
                    legend: {
                        top: 'bottom'
                    },
                    grid: {
                        left: "15%"
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: true},
                            saveAsImage: {show: true}
                        }
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: this.chartData6.yAxis_data
                    },
                    series: [
                        {
                            data: this.chartData6.series_data,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: function (d) {
                                        return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                                    },
                                    label: {
                                        show: true,
                                        formatter: function (params) {
                                            if (params.data !== 0) {
                                                return params.data
                                            } else {
                                                return ""
                                            }
                                        },
                                    }
                                }
                            }
                        }
                    ]
                });

            },
            select() {
                var that = this
                that.chartData1 = []
                that.chartData2 = []
                that.chartData3 = {
                    yAxis_data: [],
                    series_data: []
                }
                that.chartData4 = {
                    yAxis_data: [],
                    series_data: []
                }
                that.chartData5 = {
                    yAxis_data: [],
                    series_data: []
                }
                that.chartData6 = {
                    yAxis_data: [],
                    series_data: []
                }
                this.loading = true
                var token = sessionStorage.getItem("token")
                var params = new URLSearchParams()
                params.append('token', token)
                axios.post('/admin/workerStatistical', params)
                    .then(function (response) {
                        that.loading = false
                        console.log(response)
                        if (response.data.status === 444) {
                            that.$message.error("您的登录信息已过期，请重新登录")
                            that.$router.replace("/")
                        } else if (response.data.status === 445) {
                            that.$message.error("您没有此操作权限")
                        } else {
                            that.tableData = response.data
                            for (var i = 0; i < response.data.length; i++) {
                                var tmp1 = {
                                    value: response.data[i].acceptnum,
                                    name: response.data[i].username
                                }
                                var tmp2 = {
                                    value: response.data[i].completenum,
                                    name: response.data[i].username
                                }
                                var tmp3 = {
                                    value: parseFloat(response.data[i].percentage.split("%")[0]),
                                    name: response.data[i].username
                                }
                                var tmp4 = {
                                    value: response.data[i].score1,
                                    name: response.data[i].username
                                }
                                var tmp5 = {
                                    value: response.data[i].score2,
                                    name: response.data[i].username
                                }
                                var tmp6 = {
                                    value: response.data[i].score3,
                                    name: response.data[i].username
                                }
                                that.chartData1.push(tmp1)
                                that.chartData2.push(tmp2)
                                that.chartData3.yAxis_data.push(tmp3.name)
                                that.chartData3.series_data.push(tmp3.value)
                                that.chartData4.yAxis_data.push(tmp4.name)
                                that.chartData4.series_data.push(tmp4.value)
                                that.chartData5.yAxis_data.push(tmp5.name)
                                that.chartData5.series_data.push(tmp5.value)
                                that.chartData6.yAxis_data.push(tmp6.name)
                                that.chartData6.series_data.push(tmp6.value)
                            }

                            that.drawChart();
                        }

                    })
            },
            formatterScore1: function (row, column, cellValue) {
                if (cellValue === null) {
                    return '暂无评分'
                } else {
                    return cellValue
                }
            },
            formatterScore2: function (row, column, cellValue) {
                if (cellValue === null) {
                    return '暂无评分'
                } else {
                    return cellValue
                }
            },
            formatterScore3: function (row, column, cellValue) {
                if (cellValue === null) {
                    return '暂无评分'
                } else {
                    return cellValue
                }
            },
        },
        data() {
            return {
                name: '',
                size: 7,
                tableData: null,
                total: null,
                loading: true,
                chartData1: [],
                chartData2: [],
                chartData3: {
                    yAxis_data: [],
                    series_data: []
                },
                chartData4: {
                    yAxis_data: [],
                    series_data: []
                },
            }
        },
        mounted() {
            this.select()
        },
    }
</script>
